<template>
  <div class="video-item">
    <!-- <vue3VideoPlay
        v-bind="options"
        @play="onPlay"
        @timeupdate="onTimeupdate"
        :height="videoHeight"
        :width="videoWidth"
        ref="player"
        v-if="videoModel"
      >
      </vue3VideoPlay> -->

    <div
      id="mui-player"
      v-if="videoModel"
      :style="[{ width: videoWidth }, { height: videoHeight }]"
      style="background: #ddd"
      ref="muiRef"
    ></div>

    <div
      style="
        text-align: left;
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
      "
      :class="{ mobile: props.mobile === 'false' ? false : true }"
    >
      <!-- <div>
          <el-button @click="changeVideo">切换类型</el-button>
        </div> -->
      <div
        class="oper"
        :class="{ fontM: props.mobile === 'false' ? true : false }"
      >
        <div style="color: #1296db">
          <img src="@/assets/icon/look.png" alt="" class="item-icon" />
          浏览&nbsp;{{ tool.numberTo(lookCount) }}
        </div>
        <div
          v-if="!props.hobby.isLike"
          @click="like(props.video.id, 1)"
          class="item"
        >
          <img src="@/assets/icon/aixin5.png" alt="" class="item-icon" />
          点赞&nbsp;{{ tool.numberTo(likeCount) }}
        </div>
        <div
          v-else
          style="color: #d81e06"
          class="item"
          @click="like(props.video.id, 2)"
        >
          <img src="@/assets/icon/aixin4.png" alt="" class="item-icon" />
          已点赞&nbsp;{{ tool.numberTo(likeCount) + 1 }}
        </div>
        <div
          v-if="!props.hobby.isCollect"
          class="item"
          @click="collect(props.video.id, 1)"
        >
          <img src="@/assets/icon/shouc4.png" alt="" class="item-icon" />
          收藏&nbsp;{{ tool.numberTo(collectionCount) }}
        </div>
        <div
          v-else
          style="color: #f5c707"
          class="item"
          @click="collect(props.video.id, 2)"
        >
          <img src="@/assets/icon/shouc5.png" alt="" class="item-icon" />
          已收藏&nbsp;{{ tool.numberTo(collectionCount) + 1 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps, ref, defineEmits, onMounted } from "vue";
import tool from "@/assets/js/tool";
import "mui-player/dist/mui-player.min.css";
import MuiPlayer from "mui-player";

const emits = defineEmits(["like", "collect", "open"]);
const props = defineProps({
  video: {
    type: Object,
    default: () => {},
  },
  mobile: {
    type: String,
    default: "false",
  },
  type: {
    type: Boolean,
    default: false,
  },
  hobby: {
    type: Object,
    default: () => {},
  },
});

// const player = ref();
const videoModel = ref(true);

const likeCount = computed(() => props.video.thumbUp);
const collectionCount = computed(() => props.video.collection);
const lookCount = computed(() => props.video.lookCount);

// const changeVideo = () => {
//   videoModel.value = !videoModel.value;
// };

const muiRef = ref();

const videoHeight = computed(() =>
  props.mobile === "false" ? "300px" : "700px"
);
const videoWidth = computed(() => (props.mobile === "false" ? "100%" : "70%"));

// const onPlay = (ev) => {
//   if (!props.type) {
//     if (ev.target.currentTime >= 10) {
//       player.value.pause();
//       emits("open");
//     }
//   }
// };

// const onTimeupdate = (ev) => {
//   if (!props.type) {
//     if (ev.target.currentTime >= 10) {
//       player.value.pause();
//       emits("open");
//     }
//   }
// };

const like = (id, model) => {
  emits("like", id, model);
};

const collect = (id, model) => {
  emits("collect", id, model);
};

onMounted(() => {
  // convertVideoLinkToBlob();
  if (props.video !== null || props.video !== undefined) {
    let mp = new MuiPlayer({
      container: "#mui-player",
      title: props.video.title,
      src: props.video.videoUrl,
      height: videoHeight,
      width: videoWidth,
      poster: props.video.firstImgUrl,
      controls: props.type,
      videoAttribute: [
        { attrKey: "webkit-playsinline", attrValue: "webkit-playsinline" },
        { attrKey: "playsinline", attrValue: "playsinline" },
        { attrKey: "x5-video-player-type", attrValue: "h5-page" },
      ],
    });

    mp.on("duration-change", function (event) {
      console.log("====", event, mp.currentTime);
    });
    mp.on("timeupdate", function () {
      console.log("====", mp.currentTime);
    });
  }
});
</script>

<style scoped lang="scss">
.video-item {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mobile {
  width: 70% !important;
}

.oper {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: end;
  & > div {
    display: flex;
    align-items: center;
    color: #bfbfbf;
    margin-left: 15px;
    justify-content: end;
  }
}

.fontM {
  font-size: 10px !important;
}

.item-icon {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.item:hover {
  cursor: pointer;
}
</style>
